<script setup>
import { ref, reactive } from 'vue'
import { useAppStore } from '../stores/app.js'
const appState = useAppStore()
const isScriptStart = ref(0)
const getPositionScript = () => {
  let param = isScriptStart.value ? 1 : 0
  appState.sendAndroid('AndroidStartGetPositionScript', param, () => {
    if (isScriptStart.value) {
      isScriptStart.value = 0
    } else {
      isScriptStart.value = 1
    }
  })
}

const getPositionUpScript = () => {
  if (appState.app.loading) return
  appState.upScript('getPosition')
}
</script>

<template>
  <div class="tool">
    <var-card title="获取坐标">
      <template #description>
        <div class="card-content">
          <div class="btn-box">
            <var-button class="btn" type="primary" @click="getPositionUpScript">更新</var-button>
            <var-button class="btn" type="primary" @click="getPositionScript">{{ isScriptStart ? '关闭' : '启动'
            }}</var-button>
          </div>

        </div>
      </template>
    </var-card>
  </div>
</template>


<style lang='scss' scoped>
.tool {
  padding: 20px;


  .var-card {
    margin: 10px 0;
    opacity: 0.7;
    .card-input {
      width: 200px;
    }

    .radio {
      display: block;
    }

    .btn-box {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      .btn {
        width: 30%;
      }
    }

  }
}
</style>